<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
		body{
			background-image: url("img/背景.jpg");
    		background-size: cover;
    		background-repeat: no-repeat;
    		background-attachment: fixed;
			}
		header{
			  background: #F4F4F4;
			  opacity: 0.8;
			  color:white;
			  text-align: center;
			  width: 100%;
			  height: 100px;
			  z-index: 999;
			}
		header nav{
					margin: 1px auto;
					width: 70%;
				}
			#com{
				 	width: 1000px;
				 	font-size: 20px;
				 	margin: 0 auto;
					text-align: center;
					position: relative;
					top: 100px;
				}
			#comtainer{
				width: 80%;
				margin: 0 auto;
				position: relative;
				top: 0px;
				}
			.t1{
				width: 24%;
				float: left;
				margin-top:10px;
				margin-right: 8px;
				}
			.t1 img{
					width: 100%;
					height: 309px;
					border-radius: 5px;
					margin-right: 8px;
	
					}
			.t{
					width: 24%;
					float: left;
					margin-top: 8px;
					margin-right: 8px;
				}
			.t img{
					width: 100%;
					height: 150px;
					border-radius: 5px;
					}
			.t2{
					width: 24%;
					float: left;
					margin-top: 8px;
					margin-right: 8px;
				}
			.t2 img{
					width: 100%;
					height: 150px;
					border-radius: 5px;
				}
			.t3{
					width: 24%;
					float: left;
					margin-top: 8px;
					margin-right: 8px;
				}
			.t3 img{
					width: 100%;
					height: 150px;
					border-radius: 5px;
				}
				@media only screen and (max-width:500px){
					.t{
						width: 48%;
						margin-top: 1.5%;}
					.t:nth-child(n+2){
						margin: 0;
						margin-top: 1.5%;
					}
					.t:nth-child(n){
						margin-right: 3%;
					}	
				}	
		</style>
	</head>
	<body>
		<header>
			<img src="img/3.png" width="150px" height="80px">
		</header>
		<div id="comtainer">
			<div class="t1">
				<img src="img/1.png"/>
			</div>
			<div class="t1">
				<img src="img/2.png"/>
			</div>
			<div class="t2">
				<img src="img/4.png"/>
			</div>
			<div class="t2">
				<img src="img/5.png"/>
			</div>
			<div class="t3">
				<img src="img/6.png"/>
			</div>
			<div class="t3">
				<img src="img/7.png"/>
			</div>
			<div class="t">
				<img src="img/8.png"/>
			</div>
			<div class="t">
				<img src="img/9.png"/>
			</div>
			<div class="t">
				<img src="img/10.png"/>
			</div>	
			<div class="t">
				<img src="img/12.png"/>
			</div>
			<div class="t">
				<img src="img/13.png"/>
			</div>
			<div class="t">
				<img src="img/14.png"/>
			</div>
			<div class="t">
				<img src="img/15.png"/>
			</div>
			<div class="t">
				<img src="img/16.png"/>
			</div>
	   </div>	
	</body>
</html>
